<template>
  <div class="flex min-h-[700px]">
    <div class="w-[100%]">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="changes($event)">
        <el-tab-pane label="已添加" name="1"> </el-tab-pane>
        <el-tab-pane label="未添加" name="2"></el-tab-pane>
      </el-tabs>
      <div class="flex justify-between">
        <div v-if="activeName == '1'">
          <div v-auth="'business.alarm.strategy.receiveDel'">
            <el-button type="primary" :disabled="selectionData.length < 1" plain @click="cancelall(1)">取消</el-button>
            <el-button type="primary" plain @click="cancelall(2)">全部取消</el-button>
          </div>
        </div>
        <div v-if="activeName == '2'">
          <div v-auth="'business.alarm.strategy.receiveAdd'">
            <el-button type="primary" :disabled="selectionData.length < 1" plain @click="adddevice(1)">添加</el-button>
            <el-button type="primary" plain @click="adddevice(2)">全部添加</el-button>
          </div>
        </div>
        <div class="felx">
          <el-form label-width="auto" inline>
            <el-form-item label="手机号码" prop="">
              <el-input placeholder="请输入手机号码" v-model="listParams.phone"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名" prop="">
              <div class="flex">
                <el-input placeholder="请输入用户姓名" v-model="listParams.nickname"></el-input>
                <el-button type="primary" class="ml-[16px]" @click="getList">搜索</el-button>
                <sj-button custom-type="sinfo" @click="resetting">重置</sj-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <pure-table :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)" showOverflowTooltip border
        @selection-change="selectionChange" :isShowPag="false" :key="key">
      </pure-table>
      <div class="mt-5">
        <el-pagination v-model:current-page="listParams.page" v-model:page-size="listParams.limit" background
          :layout="PAGE_LAYOUT" :total="tableData.total" @size-change="getList" @current-change="getList" />
      </div>
    </div>
  </div>
</template>
<script setup>
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import treeList from "@/components/treeList/treeList.vue";
const selectionData = ref([]);
import { facilitbuildings } from "@/api/operate/timed-tasks/index";
import {
  receiverslist,
  addreceiver,
  delreceiver
} from "@/api/operate/alarm-management/alarm-strategy";
const tableData = reactive({
  data: [],
  total: 0
});
import { PAGE_LAYOUT } from "@/constant";
const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
});
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
const operate = usePageVariablesStoreHook().getOperate();
const activeName = ref("1");
const listParams = ref({
  isAdd: true,
  page: 1,
  limit: 10,
  phone: '',
  nickname: "",
  strategyId: props.id
});
const roleTableConfig = [
  { type: "selection", align: "left" },
  { prop: "id", label: "编号", width:  100 },
  { prop: "nickname", label: "用户姓名" },
  { prop: "loginName", label: "登录账号" },
  { prop: "phone", label: "手机号码" }
];
const changes = e => {
  if (e.props.name === "1") {
    listParams.value.isAdd = true;
  } else {
    listParams.value.isAdd = false;
  }
  getList();
};
const treeRef = ref(null);
//列表参数

const defaultSearchForm = () => {
  return {
    isAdd: true,
    page: 1,
    limit: 10,
    phone: "",
    nickname: "",
    isAdd: listParams.value.isAdd,
    strategyId: props.id
  };
};
const key = ref(0);
const keyvalue = ref(0);
//获取列表
const getList = () => {
  receiverslist({ ...listParams.value, strategyId: props.id }).then(res => {
    if (res.code == 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
      key.value++;
    }
  });
};
// 重置搜索栏
const resetting = () => {
  //点击重置按键
  Object.assign(listParams.value, defaultSearchForm());
  key.value++;
  getList();
};

//数形事件
const isLoading = ref(true);

//取消和全部取消
const cancelall = type => {
  if (type == 1) {
    delreceiver({
      id: props.id,
      projectId: operate.checkedProject,
      receiveIds: selectionData.value.map(item => item.id),
      isAll: false
    }).then(res => {
      if (res.code == 200) {
        getList();
        selectionData.value = [];
        ElMessage({
          type: "success",
          message: res.msg
        });
      } else {
        ElMessage({
          type: "error",
          message: res.msg
        });
      }
    });
  } else {
    delreceiver({
      id: props.id,
      receiveIds: selectionData.value.map(item => item.id),
      projectId: operate.checkedProject,
      isAll: true
    }).then(res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: res.msg
        });
        getList();
        selectionData.value = [];
      } else {
        ElMessage({
          type: "error",
          message: res.msg
        });
      }
    });
  }
};
//添加和全部添加
const adddevice = type => {
  if (type == 1) {
    addreceiver({
      id: props.id,
      projectId: operate.checkedProject,
      receiveIds: selectionData.value.map(item => item.id),
      isAll: false
    }).then(res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: res.msg
        });
        getList();
        selectionData.value = [];
      } else {
        ElMessage({
          type: "error",
          message: res.msg
        });
      }
    });
  } else {
    addreceiver({
      id: props.id,
      projectId: operate.checkedProject,
      deviceIds: selectionData.value,
      isAll: true
    }).then(res => {
      if (res.code == 200) {
        ElMessage.success(res.msg);
        getList();
        selectionData.value = [];
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
};
const selectionChange = data => {
  selectionData.value = data;
};

const open = () => {
  resetting();
};
onMounted(() => {
  open();
});
</script>
